<template>
	<!-- 列表 -->
	<div id="c">
		<div class="paperList" v-for="(item, index) in list" :key="index" @click="paperClick(item)">
			<h1 v-if="title == 'examname' || difTime == 'carrypapertime' || difTime == 'date'">{{ item.examname }} <div v-if="item.status == 1">续考</div><div v-if="item.isreexam" class="chongkao">重考</div></h1>
			<h1 v-else>{{ item.papername }}{{ item.title }} <div v-if="item.status == 1">续考</div><div v-if="item.isreexam" class="chongkao">重考</div></h1>
			<div class="item_a">
				<span>
					<i class="iconfont icon-shijian"></i>
					<template v-if="difTime == 'createtime'">
						创建时间：{{ item.createtime }}
					</template>
					<template v-else-if="difTime == 'carrypapertime'">
						交卷时间：{{ item.carrypapertime }}
					</template>
					<template v-else-if="difTime == 'date'">
						交卷时间：{{ item.date }}
					</template>
					<template v-else>
						{{ item.starttime }}~{{ item.endtime }}
					</template>
				</span>
				<span>
					<i class="iconfont icon-shuliang"></i>
					{{ item.totalquecount }}道题
				</span>
				<span v-if="title == 'examname'">
					<i class="iconfont icon-kaoshishichang"></i>
					{{ item.minutes / 60 }}分钟
				</span>
				<span>
					<i class="iconfont icon-fenshu"></i>
					{{ item.totalscore }}分
				</span>
			</div>
			<div class="item_b" v-if="title == 'examname'">
				<!-- 考试任务引用 -->
				<div class="item_btn" @click="handerStartAnswer(item)">开始考试</div>
				<!-- <div v-if="item.state !== 2 && item.state !== 3" class="item_btn item_btn_gray">{{ btnState[item.state] }}</div> -->
			</div>
			<div class="item_b" v-else>
				<div v-if="item.status != 2 && item.status" class="item_btn" @click="handerStartAnswer(item)">开始考试</div>
				<div v-if="item.status === 2 || !item.status" :class="[item.score >= 60 ? 'success' : 'danger', 'item_score']">{{ item.score }}分</div>
			</div>
		</div>
		<Popup :title="modeTit" :mold="2" v-if="modeFlase"></Popup>
	</div>
</template>

<script>
import exam from '../../mixins/exam.js';
export default {
	computed: {},
	mixins: [exam],
	data() {
		return {
			btnState: ['未开始', '已结束', '进行中', '已开始', '超时'], //考试任务状态
			modeTit: '试卷加载中...', //提示弹窗标题
			modeFlase2: this.modeFlase, //提示弹窗
			isAnswer: false //是否开始答题
		};
	},
	props: {
		list: {
			type: Array,
			required: true
		},
		difTime: {
			type: String
		},
		title: {
			//examname考试任务进入
			type: String
		},
		modeFlase:{
			type:Boolean
		}
	},
	watch: {
		modeFlase(val) {
			if (!val) {
				// 如果获取到数据
				this.$emit('changeAnswer', val);
			}
		}
	},
	methods: {
		paperClick(item) {
			this.$emit('paperClick', item);
		},
		handerStartAnswer(item) {
			const params = { paperid: item.paperid , papername: item.papername , examname: item.examname , ueid: item.ueid};
			this.$emit('startAnswer', params , item);
		}
	}
};
</script>

<style>
.paperList {
	padding-left: 30px;
	height: 150px;
	border-bottom: 1px solid #ebebeb;
}
.paperList:last-child {
	border-bottom: none;
}
.paperList:hover {
	box-shadow: 0px 0px 18px 0px rgba(50, 67, 108, 0.12);
	border-bottom: none;
	height: 151px;
	margin-top: -1px;
	background-color: #ffffff;
}
.paperList h1 {
	float: left;
	margin-top: 44px;
	width: 60%;
	display: flex;
	height: 20px;
	line-height: 20px;
	font-size: 20px;
	font-weight: 600;
	color: #394151;
	margin-right: 30px;
}
.paperList h1 div {
	margin-left: 30px;
	margin-top: -3.5px;
	width: 60px;
	height: 26px;
	line-height: 26px;
	border: 1px solid #5fba4a;
	border-radius: 3px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	color: #5fba4a;
}
.paperList h1 .chongkao{
	border: 1px solid #ffa700;
	color: #ffa700;
}
.item_a span {
	margin-right: 20px;
}
.item_a {
	float: left;
	font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
	margin-top: 24px;
	width: 60%;
	height: 14px;
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	color: #a6a6a6;
}
.item_a i{
	margin-right: 6px;
}
.item_b {
	float: right;
	margin-right: 30px;
	margin-top: -12px;
}
.item_b .item_btn {
	cursor: pointer;
	width: 118px;
	height: 42px;
	background: linear-gradient(150deg, #fc7767 0%, #ec412f 100%);
	border-radius: 21px;
	/*padding-top: 20px;*/
	line-height: 42px;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	color: #ffffff;
}
.item_b .item_btn_gray {
	background: #f5f5f5;
	color: #b3b3b3;
}
.item_b .item_score {
	/* width: 100px; */
	height: 30px;
	font-size: 32px;
	font-weight: 400;
	text-align: left;
}
</style>
